<template>
	<view class="jobDetailPage">
		<view class="jobCard  mL15 mR15">
			<view class="flex   jst-between">
				<view class="jobName u-3  line28">
					<text class="font20 bold pR5">{{info?.oddJobName}}</text>
					<u-tag text="急聘" bg-color="#fff" class="jpTag" :color="'#FF0000'" :border-color="'#FF0000'"
						v-show="info?.izUrgent==1" />
					<u-tag v-if="info.recruitmentCarefree&&info.recruitmentCarefree.indexOf('10')>=0" text="用工无忧"
						bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'" />
				</view>
				<view class="flex line28">
					<view style="width: 42rpx;height: 42rpx;">
						<button class="jobShareBtn" type="default" open-type="share" hover-class="button-hover">
							<u-icon name="zhuanfa" :size="42" :color="'#333333'"></u-icon>
						</button>

					</view>
				</view>
			</view>
			<view class="flex alg-center mT5">
				<view class="jobTime">{{info?.jobBeginDatetime}}-{{info?.jobEndDatetime}}</view>
				<view class="jobTime">{{info?.salaryPaymentText}}</view>
				<view class="jobTime">招{{info?.oddJobUseNum}}人</view>
			</view>
			<view class="flex jst-between alg-center">
				<view class="">
					<text class="font24 u-red bold">{{info?.salary}}</text>
					<text class="u-red font14 bold">元</text>
				</view>
				<view class="font13 ua">
					发布于{{info?.timediffStr}}
				</view>
			</view>
			<view class="mT10 posBox">
				<view class="flex jst-between pT10">
					<view class="jobPos flex alg-center ">
						<image class="posImg" :src="resources.posIcon" mode=""></image>
						<text class="mL5 font15 u-3">{{info?.provinceName}}-{{info?.cityName}}-{{info?.areaName}}</text>
					</view>
					<view @click.stop="openMap">
						<u-image :width="42" :height="42" :src="resources.route" mode=""></u-image>
					</view>
				</view>
				<view class="flex alg-center jst-between mT5">
					<view class="u-8bd font13 pL20 w80">
						{{info?.hopeWorkAddress}}
					</view>
					<view class="u-6 font13">
						{{info?.distance}}
					</view>
				</view>
			</view>

		</view>

		<view class="mL15 mR15 mT15">
			<view class="u-3 font18 bold mB15">职位要求</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="font13 u-9">用工工期</view>
				<view class="u-3 font15 mT5">{{info?.jobBeginTime}}~{{info?.jobEndTime}}</view>
				<view class="font13 u-9 mT10">工作时间</view>
				<view class="u-3 font15 mT5">{{info?.jobBeginDatetime}}-{{info?.jobEndDatetime}}</view>
				<view class="font13 u-9 mT10">自带工具</view>
				<view class="u-3 font15 mT5">{{info?.izToolsText}}</view>
				<view class="font13 u-9 mT10">工作方式</view>
				<view class="u-3 font15 mT5">{{info?.workWayText}}</view>
			</view>
		</view>

		<view class="mL15 mR15 mT15">
			<view class="u-3 font18 bold mB15">职位详情</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="font15 u-3 line32">
					{{info?.oddJobDescribe}}
				</view>
			</view>
		</view>
		<view class="mL15 mR15 mT15">
			<view class="u-3 font18 bold mB15">职位发布者</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="flex pB15 jgGs mB15" v-if="info?.oddReleaseType==2"
					@click="xf.onlineUtils.route(`/pages/common/jggs/index?id=${info.regulatoryId}`)">
					<u-image v-if="info?.regulatoryProfile" :width="90" :height="90"
						:src="xf.getImgUrl(info?.regulatoryProfile)" mode=""></u-image>
					<image v-else class="imgW90" :src="resources.defaultHeader" mode=""></image>
					<view class="companyInfo mL10">
						<view class="font16 bold">{{info?.regulatoryName}}</view>
						<view class="flex alg-center mT5">
							<image class="w24" :src="resources.jgGsIcon" mode=""></image>
							<text class="font13 u-6 mL5">监管认证</text>
						</view>
					</view>
				</view>

				<view class="flex" @click="jumpPersonDetail">
					<u-image :width="90" :height="90" v-if="info?.comOrUserProfile"
						:src="xf.getImgUrl(info?.comOrUserProfile)" mode=""></u-image>
					<image v-else class="imgW90" :src="resources.defaultHeader" mode=""></image>
					<view class="companyInfo mL10">

						<view class="flex jst-between alg-center">
							<view>
								<view class="font16 bold">{{info?.comOrUserName}}</view>
								<view class="flex alg-center mT5">
									<image v-if="info?.oddReleaseType==1" class="w24" :src="resources.qyrzLogo" mode="">
									</image>
									<image v-if="info?.oddReleaseType==2" class="w24" :src="resources.grrzLogo" mode="">
									</image>
									<text class="font13 u-6 mL5">{{info?.oddReleaseType==1?'企业招工认证':'个人招工认证'}}</text>
									<image class="w24 mL12" :src="resources.star" mode=""></image>
									<text class="u-yellow mL5 font15">{{info?.comOrUserScore}}</text>
								</view>
							</view>
							<view>
								<u-icon name="arrow-right" :size="28" :color="'#8d8d8d'"></u-icon>
							</view>
						</view>
						<view class="font15">在招职位 <text class="u-blue">{{info?.comOrUserWorkNum||0}}</text> 个</view>
					</view>

				</view>
			</view>

		</view>
		<view class="mL15 mR15 mT15">
			<view class="u-3 font18 bold mB15">安全提醒</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="font15 u-3 line32">
					<u-parse :html="tx"></u-parse>
				</view>
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import {
		jobDetail,
		rightNowBm,
		getPhone
	} from '@/api/userInterface/job.js'
	import {
		getXy,
		favorOpt,
		cancelFavor
	} from "@/api/userInterface/user.js"
	import {
		getLocal
	} from "@/libs/map.js"
	import share from "@/utils/share.js"
	import logo from "@/static/image/logo.jpg"
	import define from '@/utils/define'
	export default {
		mixins: [share],
		components: {

		},
		data() {
			return {
				loading: false,
				id: null,
				showModal: false,
				info: null,
				tx: null,
				define: define,
				longitude: null,
				longitude: null,
				share: {
					title: '',
					path: '/pages/userPage/subpackge/oddJob/jobDetail/jobDetail',
					imageUrl: "",
					desc: '找工作-百灵鸟灵工驿站',
					content: ''
				},
				suggestId: ""
			};
		},
		onLoad(e) {
			this.jobId = e.id;
			this.suggestId = e.suggestId ? e.suggestId : ""
			this.getDetail(this.jobId)
			this.getSalfe()
		},
		methods: {

			rightNowBm(v) {
				if (this.xf.isLogin()) {
					this.rightBmOpt()
				} else {
					this.$refs.tipModal.open({
						content: "您还未登录,请先登录",
						btnText: "去登录",
						showCancel: true,
						success: function() {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					})
				}

			},
			rightBmOpt(v) {
				let that = this;
				let authStatus = uni.getStorageSync('authStatus')
				if (authStatus && authStatus != 0) {
					this.$refs.tipModal.open({
						content: "您确定报名该职位吗？",
						btnText: "确认报名",
						showCancel: true,
						success: function() {
							rightNowBm({
								"xfOddjobInfoId": that.info.id,
								"xfOddjobInfoName": that.info.oddJobName,
								thirdId: that.suggestId
							}).then(res => {

								if (res.success == true) {
									uni.showToast({
										title: "报名成功!",
										icon: 'none',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								}

							}).catch(err => {
								console.log(err)
							})
						}
					})

				} else {
					this.$refs.tipModal.open({
						content: "您还未进实名认证，请先实名认证？",
						btnText: "去认证",
						showCancel: true,
						success: function() {
							uni.navigateTo({
								url: "/pages/userPage/subpackge/my/smrz/smrz"
							})
						}
					})
				}

			},
			getSalfe() {
				getXy({
					agreement: 'AQTX'
				}).then(res => {
					this.tx = res.result.content
				})
			},
			// 收藏
			favorOptFunc(type) {
				let that = this;
				favorOpt({
					xfOddjobInfoId: that.info?.id,
					collectState: "0",
					collectType: that.info?.collectType
				}).then(res => {
					if (res.success == true) {
						uni.showToast({
							title: "收藏成功！",
							icon: 'none',
							duration: 2000

						})
						that.info.collectState = type;

					}
				})
			},
			//取消收藏
			cancelFavorOpt(type) {
				let that = this;
				cancelFavor({
					xfOddjobInfoId: that.info?.id

					// collectState: type.toString(),
					// collectType: that.info?.collectType
				}).then(res => {
					if (res.success == true) {
						uni.showToast({
							title: "取消收藏成功！",
							icon: 'none',
							duration: 2000

						})
						that.info.collectState = type;

					}

				}).catch(err => {

				})
			},
			scOpt(type) {
				let that = this;
				let strd = type == 0 ? '收藏' : '取消收藏'
				this.$refs.tipModal.open({
					content: "确认" + strd + "该职位吗？",
					btnText: strd,
					showCancel: true,
					success: function() {
						if (type == 0) {
							that.favorOptFunc(type)
						} else {
							that.cancelFavorOpt(type)
						}
					}
				})

			},
			async getDetail(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();
				jobDetail({
					infoId: id,
					latitude: lat,
					longitude: lon
				}).then(res => {
					this.info = res.result
					this.share.title = this.info.oddJobName;
					this.share.path = `/pages/userPage/subpackge/oddJob/jobDetail/jobDetail?id=${this.jobId}`
				})
			},
			jumpPersonDetail() {
				let id = this.info.oddReleaseType == 1 ? this.info.comId : this.info.xfOddUserId;
				uni.navigateTo({
					url: `/pages/common/personOrcompnayInfo/index?id=${id}&isPerson=${this.info?.oddReleaseType}`
				})
			},
			callNumber() {
				let id = this.info.id;
				this.xf.callPhone({
					xfOddjobInfoId: id
				})
			},
			openMap() {
				uni.openLocation({
					latitude: this.info?.latitude,
					longitude: this.info?.longitude,
					// name:this.info?.comName,
					address: this.info?.hopeWorkAddress,
					success: function() {
						console.log('success');
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			phoneLink() {
				let that = this;
				if (this.xf.isLogin()) {
					let authStatus = uni.getStorageSync('authStatus')
					if (authStatus && authStatus != 0) {
						this.$refs.tipModal.open({
							content: "确认拨打电话吗？",
							btnText: "拨打",
							showCancel: true,
							success: function() {
								let id = that.info.id;
								that.xf.callPhone({
									xfOddjobInfoId: id
								})
							}
						})


					} else {
						this.$refs.tipModal.open({
							content: "您还未进实名认证，请先实名认证？",
							btnText: "去认证",
							showCancel: true,
							success: function() {
								uni.navigateTo({
									url: "/pages/userPage/subpackge/my/smrz/smrz"
								})
							}
						})
					}
				} else {
					this.$refs.tipModal.open({
						content: "您还未登录,请先登录",
						btnText: "去登录",
						showCancel: true,
						success: function() {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					})
				}

			}

		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		/* #ifdef MP-COMPANY */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
		/* #endif */

		/* #ifdef MP-ECONOMIC */
		background: linear-gradient(0deg, #F8FAFF, #EBFCFF);
		/* #endif */
	}

	.map {
		width: 100%;
		height: 242rpx;
	}

	.imgMapBg {
		min-width: 200rpx;
		padding: 0 20rpx;
		height: 100rpx;
		line-height: 80rpx;
		font-weight: bold;
		position: absolute;
		top: 60%;

		background-size: 100% 100%;
		left: 50%;
		transform: translate(-50%, calc(-50% - 60rpx));
		z-index: 9999;
	}

	.jobShareBtn {
		border: 0 !important;
		padding: 0 0 !important;
		width: 42rpx !important;
		height: 42rpx !important;
		background-color: transparent !important;
		line-height: 50rpx !important;

		&:after {
			border: 0 !important;
		}
	}
</style>
<style scoped lang="scss">
	.jgGs {
		border-bottom: 2rpx solid #F6F6F6;
	}

	.rightImg {
		width: 9rpx;
		height: 18rpx;
	}

	.phoneImg {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
	}

	.bgImg {
		position: fixed;
		width: 100%;
		z-index: 0;
		top: 0;
		/* #ifdef MP-WEIXIN */
		top: 100rpx;
		/* #endif */
	}

	.posBox {
		border-top: 2rpx solid #F6F6F6;
	}

	.companyInfo {
		width: calc(100% - 110rpx);
	}

	.jobCard {
		padding: 30rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			width: 70%;
		}

		.jobLeft {
			max-width: 70%;
		}

		.jp {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			padding: 4rpx 20rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			padding: 6rpx 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}

	.jobDetailPage {
		padding-bottom: 200rpx;
		/* #ifdef MP-COMPANY */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
		/* #endif */
		/* #ifdef MP-ECONOMIC */
		background: linear-gradient(0deg, #F8FAFF, #EBFCFF);
		/* #endif */
	}
</style>